<!-- 课后作业 -->
<template>
    <h2>{{ spanA }}</h2>
    <ul v-for="item of tmpArrA">
        <li>
            {{ item.name }}
        </li>
    </ul>
    <h2>{{ spanB }}</h2>
    <ul v-for="item of tmpArrB">
        <li>
            {{ item.name }}
        </li>
    </ul>
    <br>
    <input type="button" value="按名字排序" @click="btn_ByName()">
    <input type="button" value="按年龄排序" @click="btn_ByAge()">
    <ul v-for="item of user">
        <li>
            {{ item.name }}-{{ item.age }}
        </li>
    </ul>
</template>
<script setup>
import { ref } from 'vue';
let items = ref([{ group: 'A', name: '张三' }, { group: 'B', name: '李四' }, { group: 'A', name: '王五' }])
let user = ref([{ name: '张三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 18 }])
let ageArr = ref([])
let tmpArrA = ref([])
let tmpArrB = ref([])
let spanA = ref('')
let spanB = ref('')
items.value.filter(item => {
    if (item.group === 'B') {
        spanB.value = item.group
        tmpArrB.value.push(item)
    } else {
        spanA.value = item.group
        tmpArrA.value.push(item)
    }
})

user.value.forEach(item => {
    ageArr.value.push(item.age.toString())
    ageArr.value = ageArr.value.sort()
})



function btn_ByAge() {
    // 如何随机生成这几个数???????
    let number1;
    let number2;
    let number3;

    for (let idx = 0; idx < ageArr.value.length; idx++) {
        if (ageArr.value.length !== 0) {
            number1 = ageArr.value[idx]
            ageArr.value.splice(idx, 1)
            number2 = ageArr.value[idx]
            ageArr.value.splice(idx, 1)
            number3 = ageArr.value[idx]
            ageArr.value.splice(idx, 1)
        }
    }
    console.log(number1, number2, number3);

    let xx = user.value.find(item => {
        return item.age.toString() === number1
    })

    let yy = user.value.find(item => {
        return item.age.toString() === number2
    })
    let zz = user.value.find(item => {
        return item.age.toString() === number3
    })
    user.value = []
    user.value.push(xx, yy, zz)
    console.log(xx, yy, zz);





}
function btn_ByName() {
    user.value = []
    user.value = [{ name: '张三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 18 }]
    user.value.forEach(item => {
        ageArr.value.push(item.age.toString())
        ageArr.value = ageArr.value.sort()
    })
    console.log(ageArr.value);

}
</script>